<template>
  <div style="padding:10px;">
    <el-button type="text" @click="onChangeTestPaperVisible">添加试卷</el-button>

    <!--    添加试卷弹出框-->
    <el-dialog :visible.sync="testPaperVisible" title="添加试卷">
      <el-form :model="form" label-width="50%">
        <el-form-item label="试卷ID">
          <el-input v-model="form.id" disabled auto-complete="off"/>
        </el-form-item>
        <el-form-item label="试卷名称">
          <el-input v-model="form.name" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="试卷等级">
          <el-input v-model="form.level" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="testPaperVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeText">确 定</el-button>
      </div>
    </el-dialog>

<!--    修改试卷弹出框-->
    <el-dialog :visible.sync="modifyTestVisible" title="修改试卷">
      <el-form :model="form" label-width="50%">
        <el-form-item label="试卷ID">
          <el-input v-model="form.id" disabled auto-complete="off"/>
        </el-form-item>
        <el-form-item label="试卷名称">
          <el-input v-model="form.name" auto-complete="off"/>
        </el-form-item>
        <el-form-item label="试卷等级">
          <el-input v-model="form.level" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyTestVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeModifyTest">确 定</el-button>
      </div>
    </el-dialog>

    <!--    添加题库弹出框-->
    <el-dialog :visible.sync="addQuestionVisible" title="添加题库">
      <el-form :model="form" label-width="50%">
        <el-form-item label="问题Id">
          <el-input v-model="question.questionId" disabled auto-complete="off"/>
        </el-form-item>
        <el-form-item label="问题名称">
          <el-input v-model="question.question" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addQuestionVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeAddQuestion">确 定</el-button>
      </div>
    </el-dialog>

    <!--    修改题库-->
    <el-dialog :visible.sync="modifyQuestionVisible" title="修改题库">
      <el-form :model="form" label-width="50%">
        <el-form-item label="问题Id">
          <el-input v-model="question.questionId" disabled auto-complete="off"/>
        </el-form-item>
        <el-form-item label="问题名称">
          <el-input v-model="question.question" auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyQuestionVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeModifyQuestion">确 定</el-button>
      </div>
    </el-dialog>

    <!--    添加选项-->
    <el-dialog :visible.sync="addSelectVisible"  title="添加选项">
      <el-form :model="select" ref="addSelect" :rules="rules" label-width="50%">
        <el-form-item label="选项Id" prop="id">
          <el-input v-model="select.id" type="number" :max="10"  :min="1"  auto-complete="off"/>
        </el-form-item>
        <el-form-item label="选项内容" prop="option">
          <el-input v-model="select.option" :required="true" error clearable auto-complete="off"/>
        </el-form-item>
        <el-form-item :label="select.outgoing ">
          <el-input v-model="select.outgoingValue" auto-complete="off"/>
        </el-form-item>
        <el-form-item :label="select.judge">
          <el-input v-model="select.judgeValue"  auto-complete="off"/>
        </el-form-item>
        <el-form-item :label="select.abstr">
          <el-input v-model="select.abstrValue"  auto-complete="off"/>
        </el-form-item>
        <el-form-item :label="select.rational">
          <el-input v-model="select.rationalValue"  auto-complete="off"/>
        </el-form-item>
<!--        <el-form-item>-->
<!--        <el-button type="primary" >立即创建</el-button>-->
<!--        <el-button >重置</el-button>-->
<!--      </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addSelectVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeSelect('addSelect')">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改选项-->
    <el-dialog :visible.sync="modifySelectVisible"  title="修改选项">
      <el-form :model="select" ref="modifySelect" :rules="rules" label-width="50%">
        <el-form-item label="选项Id" prop="id">
          <el-input v-model="select.id"  disabled auto-complete="off"/>
        </el-form-item>
        <el-form-item label="选项内容" prop="option">
          <el-input v-model="select.option" :required="true" clearable auto-complete="off"/>
        </el-form-item>
        <el-form-item :label="select.outgoing ">
          <el-input v-model="select.outgoingValue" auto-complete="off"/>
        </el-form-item>
        <el-form-item :label="select.judge">
          <el-input v-model="select.judgeValue"  auto-complete="off"/>
        </el-form-item>
        <el-form-item :label="select.abstr">
          <el-input v-model="select.abstrValue"  auto-complete="off"/>
        </el-form-item>
        <el-form-item :label="select.rational">
          <el-input v-model="select.rationalValue"  auto-complete="off"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifySelectVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeModifySelect('modifySelect')">确 定</el-button>
      </div>
    </el-dialog>





         <!-- 树形结构 -->
          <el-tree 
            accordion 
            :load="loadNode"
            lazy
            :data="data.soul" 
            @node-click="handleNodeClick"
          >
              <el-row
                type="flex"
                slot-scope="{ data ,node }"
                justify="space-between"
                align="middle"
                style="height: 40px; width: 100%;"
              >
                <!-- 左边内容 -->
                <el-col :span="20">
                  <span>{{ data.name || data.question || data.option }}</span>
                </el-col>
                <!-- 右边操作人员信息 -->
                <el-col :span="4">
                  <el-row style="display:flex;justify-content: center">
                    <el-col :span="12" style="text-align:center">
<!--                      {{node | get}}-->
                    </el-col>
                    <el-col :span="12" style="text-align:center">

                      <el-dropdown @command="handleCommand" v-if="node.level===1">
                        <span> 试卷操作<i class="el-icon-arrow-down" /> </span>
                        <!-- 下拉菜单 -->
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item :command="{type:'addQuestion',id:node.parent,data:data}">添加题库</el-dropdown-item>
                          <el-dropdown-item :command="{type:'removeTest',id:data.id,data:data}">删除试卷</el-dropdown-item>
                          <el-dropdown-item :command="{type:'modifyTest',id:data.id,data:data}">修改试卷名称</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>

                    <el-dropdown @command="handleCommand" v-else-if="node.level===2">
                        <span> 题库操作<i class="el-icon-arrow-down" /> </span>
                        <!-- 下拉菜单 -->
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item :command="{type:'addSelect',id:data.id,data:data}">添加选项</el-dropdown-item>
                          <el-dropdown-item :command="{type:'modifyQuestion',id:data.id,data:data}">修改题库</el-dropdown-item>
                          <el-dropdown-item :command="{type:'removeQuestion',id:node,data:data}">删除题库</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>

                     <el-dropdown @command="handleCommand" v-else>
                        <span> 选项操作<i class="el-icon-arrow-down" /> </span>
                        <!-- 下拉菜单 -->
                        <el-dropdown-menu slot="dropdown">
                          <el-dropdown-item :command="{type:'modifySelect',id:node,data:data}">修改选项</el-dropdown-item>
                          <el-dropdown-item :command="{type:'removeSelect',id:node,data:data}">删除选项</el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
          </el-tree>
          <!-- 树形结构 -->
  </div>
</template>

<script>
import soul from '../../api/soul'
import soulquestion from '../../api/soulquestion'
export default {
  filters: {
    get(value) {
      console.log(3333, value)
      return value
    }
  },
  data() {
    return {
      data: {
        soul: []
      },
      rules: {
        id: [{ required: true,trigger: 'change',message: '请输入id'}],
        option: [{ required: true,trigger: 'change',message: '请输入选项'}]
      },
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      testPaperVisible: false,//显示添加试卷弹出框
      addQuestionVisible: false,//显示添加题库弹出框
      addSelectVisible: false,//显示添加选项弹出框
      modifyTestVisible: false,//显示修改试卷弹出框
      modifySelectVisible: false,//显示修改选项框
      modifyQuestionVisible: false,//显示修改题库弹框
      form: {
        name: '我的试卷100分',//试卷name
        id: '',//试卷ID
        level: 1,//试卷等级
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        soulId: ''
      },
      currentParent : '',
      currentSelectId: '',
      currentQuestion: '',//当前问题id
      currentTestId: '',//当前试卷id
      question: {
        questionId: '',
        question: '没有问题'
      },
      select: {
        id: '',//选项id
        option: '',//选项内容
        outgoing: '外向',//选项值1
        outgoingValue: '',
        judge: '判断',//选项值2
        judgeValue: '',
        abstr: '抽象',//选项值3
        abstrValue: '',
        rational: '理性',//选项值,
        rationalValue: ''
      }
    }
  },
  created() {
    this.getSoulList()
  },
  methods: {
    handleNodeClick(data) {
      this.currentTestId = data.soulId;
    },
    async closeText(){//点击确定按钮发送添加试卷请求
      this.testPaperVisible = false
      let result = await soul.addSoul({
        name: this.form.name,
        soulId: this.form.id,
        level: this.form.level,
      })
      this.getSoulList()
    },
    //添加题库
    async closeAddQuestion(){
      this.addQuestionVisible = false
      console.log(this.currentParent,this.question)
      let result = await soulquestion.updateSoul(this.currentParent,this.question)
      await this.getSoulList()
    },
    //添加选项
    async closeSelect(formName){
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
                  this.addSelectVisible = false
          let result = await soulquestion.addOption(this.currentSelectId,this.select)
          await this.getSoulList()
          } else {
            console.log('error submit!!');
            return false;
          }
        });

    },
    async closeModifyTest(){
      this.modifyTestVisible = false
      let result = await soul.updateSoul({
        name: this.form.name,
        soulId: this.form.soulId || this.currentTestId,
        level: this.form.level,
      })
      this.getSoulList()
    },
    //关闭修改选项弹框，发送修改请求
    async closeModifySelect(formName){
      this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.modifySelectVisible = false
            let ressult = await soulquestion.updateOption(this.currentQuestion,this.select)
            this.getSoulList()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    //修改是否添加试卷弹框，发送添加试卷请求
    onChangeTestPaperVisible(){
      this.testPaperVisible = true;
      let textId = Math.floor(Math.random()*7777777)+''
      this.form.id = textId;
    },
    //修改题库名称，是否显示修改题库弹框
    async closeModifyQuestion(){
      this.modifyQuestionVisible = false
      let result = await soulquestion.updateQuestion({
        question: this.question.question,
        questionId: this.question.questionId,
      });
      this.getSoulList()
    },
    getSoulList() {
      soul.getsoullist().then(res => {
        this.data.soul = res
      })
    },
    //删除题库
    async removeQuestion(testId,questionId){
      await soulquestion.deleteQuestionById(testId,questionId)
      this.getSoulList()
    },
    //删除选项
    async removeSelect(questionId,selectId){
      await soulquestion.deleteOption(questionId,selectId)
      this.getSoulList()
    },
    //删除试卷
    async removeTest(testId){
      let result = await soul.deleteSoulId(testId);
      await this.getSoulList()
    },
    //修改试卷
    async modifyTest(test){
      this.soul.updateSoul(test)
      this.getSoulList()
    },
    getSoulQuestionById() {
      soulquestion.getSoulQuestionById().then(res => {

      })
    },
    async loadNode(node, resolve){
      let data = node.data;
      if(node.level === 1){
        let result = await soulquestion.getSoulQuestionById(data.soulId)//获取跟多题库
        result ? resolve(result) : resolve([])
      }else if(node.level === 2){
        let result = await  soulquestion.queryOptions(data.questionId);
        resolve(result)
      }else if(node.level>=3){
        resolve([])
      }
    },
    async handleCommand(info) {
      let send = {
        addQuestion : (parent)=>{
          let id = Math.floor(Math.random()*10000) * Math.floor(Math.random()*10000);
          this.question.questionId = id;
          this.currentParent = parent
          this.addQuestionVisible = true
        },
        addSelect: (selectId)=>{
          this.currentSelectId = selectId
          this.addSelectVisible = true
        },
        removeTest: (testId)=>{
          this.removeTest(testId);
        },
        modifyTest: (testId,data)=>{
          this.modifyTestVisible = true
          this.form.id = data.soulId;
          this.form.name = data.name;
          this.form.level = data.level;
        },
        modifyQuestion: (selectId,data)=>{
          this.question.questionId = data.questionId;
          this.question.question= data.question;
          this.modifyQuestionVisible = true;
        },
        removeQuestion: (questionId)=>{
          this.removeQuestion(this.currentTestId,questionId)
        },
        modifySelect: (_,select)=>{
          this.modifySelectVisible = true
          this.currentSelectId = select.id
          this.select.option = select.option
          this.select.outgoing = select.outgoing
          this.select.abstr = select.abstr
          this.select.judge = select.judge
          this.select.rational = select.rational
          this.select.id = select.id
          this.select.outgoingValue = select.outgoingValue
          this.select.abstrValue = select.abstrValue
          this.select.judgeValue = select.judgeValue
          this.select.rationalValue = select.rationalValue
        },
        removeSelect:(electId)=>{
          this.removeSelect(this.currentQuestion,electId)
        }
      }
      console.log('info6666',info)
      //获取试卷id
      this.currentTestId = info.data.soulId || info.id && info.id.parent && info.id.parent.data.soulId
      this.currentQuestion = info.id && info.id.parent && info.id.parent.data.questionId
      send[info.type] && send[info.type](info.data.soulId || info.data.questionId || info.data.id,info.data);
    }
  }
}
</script>
